<template>
  <div class="flex">
    <n-date-picker v-bind="props" :is-date-disabled="disablePreviousDate" />

    <div style="margin-left: 10px">
      <n-radio-group v-model:value="selectedDate" @update:value="handleDateRadioChange">
        <n-radio-button v-for="(item, index) in dateOptions" :key="index" :value="item.value">
          {{ item.label }}
        </n-radio-button>
      </n-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { NDatePicker, NRadioGroup, NRadioButton } from 'naive-ui'
  import { ref, watch } from 'vue'
  import { formatDate, formatPickerOptions } from '@/utils'
  import { isHQSC } from '@/utils/is'
  import { startOfDay } from 'date-fns'

  const props = defineProps({
    ...NDatePicker.props,
    dateRadio: {
      type: Number,
      default: null
    },
    customOptions: {
      type: Array,
      default: () => []
    }
  })
  const emits = defineEmits(['update:value'])
  const selectedDate = ref(props.dateRadio)
  const dateOptions = ref([
    {
      value: 1,
      label: '今天'
    },
    {
      value: 2,
      label: '昨天'
    },
    {
      value: 3,
      label: '近7天'
    },
    {
      value: 4,
      label: '近30天'
    },
    {
      value: 6,
      label: '近90天'
    }
  ])
  const dataOptionsCustom = ref([])
  if (props.customOptions.length > 0) {
    dataOptionsCustom.value = props.customOptions
    dateOptions.value = dataOptionsCustom.value
  }
  watch(
    () => props.value,
    () => {
      updateRadioValue()
    }
  )

  function handleDateRadioChange(type: number) {
    emits('update:value', formatPickerOptions(type))
  }
  function disablePreviousDate(ts: number, type: string, range: number[] | null) {
    if (startOfDay(ts).valueOf() > startOfDay(new Date()).valueOf()) {
      return true
    }

    // 最小可选择日期
    if (props.minDate && startOfDay(ts).valueOf() < startOfDay(props.minDate).valueOf()) {
      return true
    }

    if (props.maxDay) {
      if (type === 'start' && range !== null) {
        return startOfDay(range[1]).valueOf() - startOfDay(ts).valueOf() > 86400000 * (props.maxDay - 1)
      }
      if (type === 'end' && range !== null) {
        return startOfDay(ts).valueOf() - startOfDay(range[0]).valueOf() > 86400000 * (props.maxDay - 1)
      }
    }
    return false
  }
  function updateRadioValue() {
    const value = props.value
    if (value && value.length === 2) {
      const start = formatDate(value[0])
      const end = formatDate(value[1])
      const now = formatDate(new Date())
      let count = 0
      // 结束时间为今天的，那么才需要校验当前的日期范围是否在字典选项内
      if (end === now) {
        const t = +new Date() - value[0]
        count = Math.floor(t / 86400000)
      } else {
        // 校验是否为昨天，并且去匹配字典里是否有昨天
        const time = +new Date() - value[0]
        if (start === end && Math.floor(time / 86400000) === 1) {
          count = 1
        } else {
          count = Math.floor(time / 86400000)
        }
      }
      const find = dateOptions.value.find((item: { value: string }) => {
        console.log(count)
        if (count === 0) {
          return item.value === 1
        } else if (count === 1) {
          return item.value === 2
        } else if (count === 2) {
          return item.value === 2
        } else if (count === 3) {
          return item.value === 7
        } else if (count === 7) {
          return item.value === 3
        } else if (count === 30) {
          return item.value === 4
        } else if (count === 90) {
          return item.value === 6
        }
      })
      if (find) {
        selectedDate.value = find.value
      } else {
        selectedDate.value = null
      }
    } else {
      selectedDate.value = null
    }
  }
</script>

<style scoped lang="scss"></style>
